


const addModal = document.querySelector('#addModal');
const addForm = document.querySelector('.add-form');
const updateForm = document.querySelector('.update-form');


const tbody = document.querySelector('tbody');
// 页面渲染
function getStudenList() {
    axios.get('/student/list')
        .then(result => {
            // console.log(result);
            const html = result.data.data.reduce((v, h) => v + `
            <tr>
        <th scope="row">${h.id}</th>
        <td>${h.name}</td>
        <td>${h.age}</td>
        <td>${h.sex}</td>
        <td>${h.group}</td>
        <td>${h.phone}</td>
        <td>${h.salary}</td>
        <td>${h.truesalary}</td>
        <td>${h.province + h.city + h.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm update-show-modal" data-id="${h.id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm delete-Btn" data-id="${h.id}" >删除</button>
        </td>
      </tr> 
            `, '')

            tbody.innerHTML = html
        })

}
// 下拉列表
function getSeltet(seletor) {
    const provinceSelector = document.querySelector(`${seletor} [name=province]`);

    const citySelector = document.querySelector(`${seletor} [name=city]`);

    const countySelector = document.querySelector(`${seletor} [name=county]`);

    // 获取省下拉列表
    getpcc('/geo/province', {}, provinceSelector, "省")
    // axios.get('/geo/province').then(result => {
    //     provinceSelector.innerHTML = result.data.reduce((v, h) => v + `
    //     <option value="${h}">${h}</option>
    //     `, `<option value="">--省--</option>`)
    // })



    // 获取市下拉列表
    provinceSelector.addEventListener('change', function () {

        getpcc('/geo/city', { pname: provinceSelector.value }, citySelector, '市')
        // axios.get('/geo/city', { params: { pname: provinceSelector.value } })
        //     .then(result => {
        //         citySelector.innerHTML = result.data.reduce((v, h) => v + `
        //     <option value="${h}">${h}</option>
        //     `, `<option value="">--市--</option>`)
        //     })
    })



    // 获取县下拉列表
    citySelector.addEventListener('change', function () {
        const params = {
            pname: provinceSelector.value,
            cname: citySelector.value
        }
        getpcc('/geo/county', params, countySelector, '县')
        // axios.get('/geo/county', { params })
        //     .then(result => {
        //         countySelector.innerHTML = result.data.reduce((v, h) => v + `
        //     <option value="${h}">${h}</option>
        //     `, `<option value="">--县--</option>`)
        //     })
    })
}
// 每一个对应的下拉
function getpcc(url, params, dom, label, value = '') {
    axios.get(url, { params }).then(result => {
        dom.innerHTML = result.data.reduce((v, h) => v + `
        <option value="${h}">${h}</option>
        `, `<option value="">--${label}--</option>`)
        dom.value = value
    })

}



// 页面渲染
getStudenList()

// 渲染
getSeltet('#addModal')
getSeltet('#updateModal')




// 绑定事件
addModal.addEventListener('submit', function (e) {
    e.preventDefault()
    // 获取表单数据增加上去
    const data = $(addForm).serialize()
    axios.post('/student/add', data)
        .then(result => {
            if (result.data.code === 0) {
                toastr.success(result.data.message)
                addForm.reset
                getStudenList()
                $('#addModal').modal('hide')

            }
        })

})

// tbody事件
tbody.addEventListener('click', function (e) {

    // console.log(id);
    if (e.target.classList.contains('update-show-modal')) {
        const id = e.target.dataset.id
        axios.get('/student/one', { params: { id } })
            .then(result => {
                const obj = result.data.data
                $('#updateModal').modal('show');
                for (const key in obj) {
                    const update = updateForm.querySelector(`[name=${key}]`);
                    if (key === 'sex') {
                        updateForm.querySelector(` [name=sex][value=${obj.sex}]`).checked = true


                    }
                    if (update) {
                        update.value = obj[key]
                    }
                }
                getpcc('/geo/city', { pname: obj.province }, updateForm.querySelector('[name=city]'), '市', obj.city)

                getpcc('/geo/county', {
                    pname: obj.province,
                    cname: obj.city,
                }, updateForm.querySelector('[name=county]'), '县', obj.county)


            })


    } else if (e.target.classList.contains('delete-Btn')) {
        if (confirm('你确定删除？')) {
            const id = e.target.dataset.id
            axios.delete('/student/delete', { params: { id } })
                .then(result => {
                    if (result.data.code === 0) {
                        toastr.success(result.data.message)
                        getStudenList()
                    }
                })
        }
    }

})


// 修改表单事件
updateModal.addEventListener('submit', function (e) {
    e.preventDefault()
    // 获取表单数据增加上去
    const data = $(updateForm).serialize()
    axios.put('/student/update', data)
        .then(result => {
            if (result.data.code === 0) {
                toastr.success(result.data.message)
                updateForm.reset
                getStudenList()
                $('#updateModal').modal('hide')

            }
        })

})